import React, { Fragment, useEffect, useState } from 'react';

import {
    StyleSheet,
    Text,
    View,
    Animated,
    Platform,
    Easing,
    StyleProp,
    ViewStyle,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Barrage from '@/components/Barrage';
import Touchable from '@/components/Touchable';
import { connect, ConnectedProps } from 'react-redux';
import { viewportWidth } from '@/utils/index';
// import PlayBar from './PlayBar';
import { RootStackNavigation, ModalStackParamList } from '@/navigator/index';
import { RouteProp } from '@react-navigation/native';
import { RootState } from '@/models/index';

const mapStateToProps = ({ player, loading }: RootState) => ({
    playState: player.playState,
    thumbnailUrl: player.thumbnailUrl,
    soundUrl: player.soundUrl,
    title: player.title,
    loading: loading.effects['player/fetchShow'],
});

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;

interface IProps extends ModelState {
    navigation: RootStackNavigation;
    route: RouteProp<ModalStackParamList, 'ProgramDetail'>;
}

interface IState {
    data: {
        id: number;
        title: string;
    }[];
    barrage: boolean;
}

const IMAGE_WIDTH = 180;
const PADDING_TOP = (viewportWidth - IMAGE_WIDTH) / 2;
const SCALE = viewportWidth / (IMAGE_WIDTH * 0.9);

const data: string[] = [
    '最灵繁的人也看不见自己的背脊',
    '朝闻道，夕死可矣',
    '阅读是人类进步的阶梯',
    '内外相应，言行相称',
    '人的一生是短的',
    '抛弃时间的人，时间也抛弃他',
    '自信在于沉稳',
    '过犹不及',
    '开卷有益',
    '有志者事竟成',
    '合理安排时间，就等于节约时间',
    '成功源于不懈的努力',
];
function ProgramDetail(props: Readonly<IProps> & Readonly<IState>) {
    const { thumbnailUrl, navigation } = props;
    const [barrage, setBarrage] = useState(false);
    const [data] = useState([])
    const anim = new Animated.Value(1);

    const danmu = () => {
        setBarrage(!barrage)
        Animated.timing(anim, {
            toValue: !barrage ? SCALE : 1,
            duration: 100,
            easing: Easing.linear,
        }).start();
    };
    const goBack = () => {
        navigation.goBack();
    };


    return <View style={styles.container}>
        <View style={styles.content}>
            <View style={styles.imageView}>
                <Animated.Image
                    style={[
                        styles.image,
                        {
                            transform: [
                                {
                                    scale: anim,
                                },
                            ],
                        },
                    ]}
                    source={{
                        uri: thumbnailUrl,
                    }}
                />
            </View>
            {barrage && (
                <Fragment>
                    <LinearGradient
                        colors={[
                            'rgba(128, 104, 102, 0.5)',
                            'rgba(128, 104, 102, 0.8)',
                            '#807c66',
                            '#807c66',
                        ]}
                        style={styles.linear}
                    />
                    <Barrage style={styles.barrage} data={data} maxTrack={5} />
                </Fragment>
            )}
        </View>
        <View>
            <Touchable onPress={danmu} style={styles.danmuBtn}>
                <Text style={styles.danmuText}>弹幕</Text>
            </Touchable>
        </View>
    </View>
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#807c66',
    },
    scroll: {
        flex: 1,
    },
    header: {
        position: 'absolute',
        right: 0,
        left: 0,
    },
    content: {
        paddingTop: PADDING_TOP,
        alignItems: 'center',
    },
    linear: {
        position: 'absolute',
        top: 0,
        height: viewportWidth + 100,
        width: viewportWidth,
    },
    barrage: {
        height: 400,
        top: 100,
    },
    title: {
        fontSize: 18,
        fontWeight: '900',
        color: '#fff',
    },
    imageView: {
        flexDirection: 'row',
        ...Platform.select({
            ios: {
                shadowOffset: { width: 0, height: 5 },
                shadowOpacity: 0.5,
                shadowRadius: 10,
                shadowColor: '#000',
            },
        }),
        backgroundColor: '#fff',
        borderRadius: 8,
    },
    image: {
        width: IMAGE_WIDTH,
        height: IMAGE_WIDTH,
        borderRadius: 8,
    },
    control: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginVertical: 15,
        marginHorizontal: 90,
    },
    thumb: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 76,
        height: 20,
    },
    danmuBtn: {
        marginLeft: 10,
        height: 20,
        width: 40,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 1,
    },
    danmuText: {
        color: '#fff',
    },
});
export default connect(mapStateToProps)(ProgramDetail);